<template>
  <div class="menuManagement">
    <div class="menuManagement_treeBg">
      <MetaTree ref="menuManagementTree" title="菜单管理" otherBtn="新建" :defaultProps="treeProps" :treeData="treeData" @treeItemChoose="treeItemChoose" @otherBtnClick="addMenu" @addMenu="addMenu" @removeMenu="removeMenu"></MetaTree>
    </div>
    <div class="menuManagement_infoBg">
      <div class="menuManagement_info">
        <div v-if="Object.keys(roleInfoItem).length > 0" class="menuM_rightArea">
          <div class="menuM_infoTitleBg">
            <div class="menuM_infoTitle">菜单详情</div>
          </div>
          <div class="menuM_formBg">
            <el-form
              ref="menuM_roleInfo"
              :model="roleInfoItem"
              label-width="120px"
              size="mini"
              label-position="left"
              :rules="addMenuRules"
              class="menuM_info">
              <el-form-item label="菜单id" :span="8">
                <div class="menuM_infoLabel">{{ roleInfoItem.name }}</div>
              </el-form-item>
              <el-form-item label="菜单名称" :span="8" prop="nameZh">
                <el-input class="menuM_infoLabel" v-model="roleInfoItem.nameZh"></el-input>
              </el-form-item>
              <el-form-item v-if="roleInfoItem.parentId == 0" label="所属服务" :span="8" prop="server">
                <el-select
                  v-model="roleInfoItem.server"
                  placeholder="请选择">
                  <el-option
                    v-for="item in serviceData"
                    :key="item.id"
                    :label="item.value"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="roleInfoItem.parentId == 0" label="菜单类型" :span="8" prop="type">
                <el-select
                  v-model="roleInfoItem.type"
                  placeholder="请选择">
                  <el-option label="PC" value="pc"></el-option>
                  <el-option label="App" value="app"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="roleInfoItem.parentId !== 0" label="菜单地址" :span="8" prop="path">
                <el-input class="menuM_infoLabel" v-model="roleInfoItem.path"></el-input>
              </el-form-item>
              <el-form-item v-if="roleInfoItem.parentId === 0 || roleInfoItem.parentType === 'app'" label="图标" :span="8">
                <el-input class="menuM_infoLabel" v-model="roleInfoItem.iconCls"></el-input>
              </el-form-item>
              <el-form-item label="排序" :span="8">
                <el-input-number class="menuM_infoLabel" v-model="roleInfoItem.sort" :min="0"></el-input-number>
              </el-form-item>
            </el-form>
            <el-button class="menuM_button" type="primary" size="small" @click="editMenuSubmit">保存</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="addMenuDialogFlag"
      :title="addMenuParent.id && addMenuParent.id !== '' ? '新建子菜单' : '新建菜单'"
      :visible.sync="addMenuDialogFlag"
      width="60%"
      modal
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="addMenu_form" :model="addMenuData" label-width="110px" :rules="addMenuRules">
        <el-form-item v-if="addMenuParent.id && addMenuParent.id !== ''" label="父级菜单">
          <div>{{ addMenuParent.nameZh }}</div>
        </el-form-item>
        <el-form-item label="菜单id" prop="name">
          <el-input v-model="addMenuData.name" placeholder="请输入菜单id"></el-input>
        </el-form-item>
        <el-form-item label="菜单名称" prop="nameZh">
          <el-input v-model="addMenuData.nameZh" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item v-if="!addMenuParent.id || addMenuParent.id === ''" label="所属服务" prop="server">
          <el-select
            v-model="addMenuData.server"
            placeholder="请选择">
            <el-option
              v-for="item in serviceData"
              :key="item.id"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="!addMenuParent.id || addMenuParent.id === ''" label="菜单类型" prop="type">
          <el-select v-model="addMenuData.type" placeholder="请选择">
            <el-option label="PC" value="pc"></el-option>
            <el-option label="App" value="app"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="addMenuParent.id && addMenuParent.id !== ''" label="菜单地址" prop="path">
          <el-input v-model="addMenuData.path" placeholder="请输入菜单地址"></el-input>
        </el-form-item>
        <el-form-item v-if="(!addMenuParent.id || addMenuParent.id === '') || addMenuParent.type === 'app'" label="图标">
          <el-input v-model="addMenuData.iconCls" placeholder="请输入图标"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="addMenuData.sort" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div class="dialogFooter">
        <el-button size="mini" @click="addMenuClose()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="addMenuSubmit()"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MetaTree from '@/components/MetaTree'
import deepClone from '../utils/deepClone'

export default {
  name: 'menuManagement',
  components: {
    MetaTree
  },
  data () {
    return {
      addMenuDialogFlag: false,
      addMenuParent: {},
      addMenuData: {},
      treeProps: {
        children: 'children',
        label: 'nameZh',
        key: 'name'
      },
      treeData: [],
      roleInfoItem: {},
      addMenuRules: {
        name: [
          { required: true, message: '请输入菜单id', trigger: 'blur' },
        ],
        nameZh: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        server: [
          { required: true, message: '请选择所属服务', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ]
      },
      serviceData: []
    }
  },
  mounted() {
    this.initMenuList()
    this.getServiceData()
  },
  methods: {
    getServiceData() {
      let key = 'ENUM_SERVICE'
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "domains/getList",
        method: "post",
        data: [key],
      }).then((res) => {
        if(res.data.code === 200) {
          this.serviceData = res.data.result[key]
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    initMenuList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "menu/list",
        method: "get",
        data: {}
      }).then(res => {
        this.treeData = []
        for(let i in res.data.result) {
          let item = res.data.result[i]
          for(let j in item.children) {
            item.children[j].parentType = item.type
          }
          this.treeData.push(item)
        }
        // for(let i in this.treeData) {
        //   if(this.treeData[i].parentId == '0') {
        //     this.treeData[i].nameCN = this.treeData[i].nameZh
        //     this.treeData[i].nameZh = this.treeData[i].nameZh + '(' + this.treeData[i].value + ')'
        //   }
        // }
        if(Object.keys(this.roleInfoItem).length > 0) {
          let hasCurrent = false
          for(let i in this.treeData) {
            if(this.roleInfoItem.parentId == '0') {
              if(this.roleInfoItem.id === this.treeData[i].id) {
                this.roleInfoItem = deepClone(this.treeData[i])
                hasCurrent = true
                break
              }
            }else {
              let has = false
              for(let j in this.treeData[i].children) {
                if(this.roleInfoItem.id === this.treeData[i].children[j].id) {
                  this.roleInfoItem = deepClone(this.treeData[i].children[j])
                  has = true
                  hasCurrent = true
                  break
                }
              }
              if(has) {
                break
              }
            }
          }
          if(!hasCurrent) {
            this.roleInfoItem = {}
          }
        }
        this.$nextTick(() => {
          if(Object.keys(this.roleInfoItem).length > 0) {
            this.$refs.menuManagementTree.setCurrentData(this.roleInfoItem.name)
          }
        })
      })
    },
    treeItemChoose(item,reflash) {
      if(this.roleInfoItem.id !== item.id || reflash){
        this.roleInfoItem = deepClone(item)
      }
    },
    addMenu(item) {
      this.addMenuParent = {}
      if(item && Object.keys(item).length > 0) {
        this.addMenuParent = item
      }
      this.addMenuData = {
        name: '',
        nameZh: '',
        path: '',
        iconCls: '',
        sort: '',
        server: '',
        type: ''
      }
      this.addMenuDialogFlag = true
    },
    addMenuClose() {
      this.addMenuDialogFlag = false
    },
    addMenuSubmit() {
      this.$refs['addMenu_form'].validate((valid) => {
        if (valid) {
          let params = {}
          if(this.addMenuParent.id && this.addMenuParent.id !== '') {
            params.parentId = this.addMenuParent.id
          }else {
            params.parentId = '0'
          }
          params.name = this.addMenuData.name
          params.nameZh = this.addMenuData.nameZh
          params.path = this.addMenuData.path
          params.iconCls = this.addMenuData.iconCls
          params.sort = this.addMenuData.sort
          params.server = this.addMenuData.server
          params.type = this.addMenuData.type
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/menu/edit",
            method: "post",
            data: params
          }).then(res => {
            if(res.data.code === 200) {
              this.initMenuList()
              this.addMenuClose()
            }else{
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });

    },
    editMenuSubmit() {
      this.$refs['menuM_roleInfo'].validate((valid) => {
        if (valid) {
          let params = {}
          params.parentId = this.roleInfoItem.parentId
          params.id = this.roleInfoItem.id
          params.name = this.roleInfoItem.name
          params.nameZh = this.roleInfoItem.nameZh
          params.path = this.roleInfoItem.path
          params.iconCls = this.roleInfoItem.iconCls
          params.sort = this.roleInfoItem.sort
          params.server = this.roleInfoItem.server
          params.type = this.roleInfoItem.type
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "admin/menu/edit",
            method: "post",
            data: params
          }).then(res => {
            if(res.data.code === 200) {
              this.initMenuList()
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            }else{
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });

    },
    removeMenu(item) {
      this.$confirm('当前菜单若包含子菜单，则一并删除', '确认删除此菜单?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {}
        params.id = item.id
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + "admin/menu/delete",
          method: "post",
          data: params
        }).then(res => {
          if(res.data.code === 200) {
            this.initMenuList()
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.menuManagement{
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .menuManagement_treeBg {
    height: 100%;
  }
  .menuManagement_infoBg {
    width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 7px;
    flex: 1;
    .menuManagement_info {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      border: 1px solid rgb(228, 234, 236);
      flex: 1;
      overflow-y: scroll;
      box-sizing: border-box;
      padding: 15px;
      .menuM_rightArea {
        float: left;
        width: 100%;
        .menuM_infoTitleBg {
          width: 100%;
          float: left;
          // margin-top: 20px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e4e7ed;
          .menuM_infoTitle {
            font-size: 20px;
            float: left;
            height: 30px;
            line-height: 30px;
          }
        }
        .menuM_formBg {
          width: 100%;
          box-sizing: border-box;
          padding: 20px 10%;
          height: 100%;
          float: left;
          .menuM_info {
            width: 100%;
            float: left;
            padding-top: 10px;
            .el-form-item__label {
              color: #000;
            }
            .menuM_infoLabel {
              color: #606266;
            }
          }
        }
      }
    }

  }
  .dialogFooter {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
  }
}
</style>
